<template>
  <div class="RightBottom">
    <div class="hot-news-container">
      <el-input v-model="input" style="width: 310px; margin-left: 10px;" placeholder="请输入你想搜索的内容" clearable />
      <el-button icon="el-icon-search" circle class="search-button"></el-button>
      <!--  -->
      <div @mouseenter="stopScroll" @mouseleave="startScroll" ref="newsList" class="news-list">
        <div v-for="(newsItem, index) in news" :key="index" class="news-item">
          {{ newsItem }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HotNews',
  data() {
    return {
      input: '',
      news: [
        '负增长时代，为何大城市人口还能扩张？',
        '人口迁移：人口流出的城市，如何止跌回升？',
        '21座万亿城市，一年多了139万人',
        '卷不动了！2023年一线城市人口加速流失，这会是长期现象吗？',
        '人口涌入大城市的选择：有实现梦想的沃土',
        '新城市志｜一线城市人口集体负增长，释放了哪些信号',
        '人口向一线大城市聚集，在过去十几年，趋势越来越明显',
        '中国城市人口将迎大爆炸？'
      ],
      interval: null
    };
  },
  methods: {
    scrollNews() {
      const list = this.$refs.newsList;
      // 每次调用 scrollNews() 时，scrollTop 属性增加 1，表示向下滚动 1 像素。
      list.scrollTop += 1;
      // 检测是否到达底部
      // 滚动内容的总高-可视区域的高度
      if (list.scrollTop >= list.scrollHeight - list.clientHeight) {
        list.scrollTop = 0;
      }
    },
    startScroll() {
      this.interval = setInterval(this.scrollNews, 50);
    },
    stopScroll() {
      clearInterval(this.interval);
    }
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};  
</script>

<style scoped>
.RightBottom {
  width: 400px;
  height: 400px;
  margin-left: -250px;
  padding: 20px 20px;
  color: #fff;
}

.hot-news-container {
  width: 100%;
  height: 300px;
  padding: 20px;
}

.news-list {
  height: 200px;
  overflow-y: hidden;
  margin-top: 10px;
  position: relative;
}

.news-item {
  padding: 10px;
  border-bottom: 1px solid #444;
  font-size: 14px;
  color: #ffffff;
  /* transition: background-color 0.3s ease; */
}

.news-item:hover {
  background-color: #333;
}

/* 使用深度选择器来覆盖 el-input 的默认样式 */
::v-deep .el-input__inner {
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 14px;
}

::v-deep .el-input__inner::placeholder {
  color: #999;
}

/* 为按钮添加深度选择器样式 */
::v-deep .search-button {
  margin-left: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  /* transition: background-color 0.3s ease; */
}

::v-deep .search-button:hover {
  background-color: #0056b3;
}
</style>